<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'
import { showGuideQuizMask, close } from './data'

const guide_quiz = imagePath('main/home/guide-quiz.png')
const icon_close = imagePath('main/home/icon-close.png')
</script>

<template>
  <MaskWrapper v-model:show="showGuideQuizMask">
    <div
      class="guide-quiz"
      :style="{ backgroundImage: guide_quiz }"
      @click="close(true)"
    >
      <div
        class="close"
        :style="{ backgroundImage: icon_close }"
        @click.stop="close(false)"
      ></div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.guide-quiz {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 468rpx;
  height: 652rpx;

  .close {
    position: absolute;
    top: calc(100% + 10rpx);
    left: 50%;
    transform: translateX(-50%);

    width: 76rpx;
    height: 76rpx;
  }
}
</style>